// 文章列表

let total = 0 // 数据总条数
let laypage = layui.laypage

const q = {
  pagenum: 1, //第几页数据
  pagesize: 2, // 每页几条
  cate_id: '', // 分类
  state: '', // 状态 已发布/草稿
}

// 渲染文章列表
const loadList = () => {
  getArticles(q, (res) => {
    // console.log(res)
    total = res.data.total
    const list = res.data.data
    $('.layui-table tbody').empty()
    list.forEach((item) => {
      let theTr = `<tr>
                      <td>${item.title}</td>
                      <td>${item.cate_name}</td>
                      <td>${moment(item.pub_date).format(
                        'YYYY-MM-DD hh:mm:ss a'
                      )}</td>
                      <td>${item.state}</td>
                      <th>
                      <a href="/iframe/article/publisher/publisher.html?id=${
                        item.Id
                      }" class="layui-btn layui-btn-xs">编辑</a>
                      <button myid="${
                        item.Id
                      }" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
                      </th>
                    </tr>`
      $('.layui-table tbody').append(theTr)

      // total   表格tr
    })
    setPage()
  })
}

loadList()

// 分页控件的配置
const setPage = () => {
  laypage.render({
    elem: 'page', // ID值 不写#
    count: total, // 总条数
    // layout功能配置分别为:显示总条数,上一页,页码,下一页,每页条数
    layout: ['count', 'prev', 'page', 'next', 'limit'],
    limits: [3, 5, 10, 20],
    // (使用经验)分页控件第一次使用时  &  (文档)切换分页页码时,都会自动触发jump
    jump: (obj, first) => {
      console.log(obj, first)
      if (!first) {
        // 如果不是第一次设置分页控件
      }
    },
  })
}

// 筛选按钮
getCateList((res) => {
  let arr = res.data.data
  $('select[name=category]').append(
    `<option value="" lay-verify="cate">所有分类</option>`
  ) // 默认选项- 默认获取所有分类
  arr.forEach((obj) => {
    let theOption = `<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`
    $('select[name=category]').append(theOption)
  })

  // 让layui刷新一下form表单
  layui.form.render('select', 'category')
})

// 筛选请求
$('.search').on('submit', (e) => {
  e.preventDefault()
  // 更新数据!!!!
  q.cate_id = $('select[name=category]').val()
  q.state = $('select[name=state]').val()
  // 更新列表
  loadList()
})

// 随堂笔记==================
// getArticles中的拼接字符串
// 1. 编辑按钮 a  携带着当前的文章id进行跳转a
// => <a href="/iframe/article/publisher/publisher.html?id=${item.Id}"></a>
// 2. 删除按钮button  myid 就是当前文章id

// 小扩展
// js 处理日期时, => moment.js
// 核心方法  moment(要处理的日期).format('')

// ES3/5 => 很多问题 ==>  ES6   +    react/ts
// ES6 let const  class
// ts 替换js

// 分页常识普及
// 1. 分页控件=> 百度搜索的结果展示的底部
// 2. PC => 百度搜索=>  分页效果
// 3. Mobile=> 底部加载更多 +  下拉刷新
// 4. 接口数据:  总条数total / 每页条数pagenum / 页码pagesize / 当前页码currentPage=>
// 一看到这些参数=> 分页接口
